<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Javascript基础</title>
</head>
<body>
    <script>
        // #需要在dom载入后再调用，所以要写在onload中
        window.onload = function () {
            document.querySelector("div#signup form").onsubmit = function () {

                let username = document.querySelector("div#signup input[name='username']").value;


                let password = document.querySelector("div#signup input[name='password']").value;

                let city = document.querySelector("div#signup select[name='city']").value;
                console.log(city);//在控制台输出日志

                if (username === "rabbit" && password === "love" && city === "sz"){
                    document.querySelector("div#signup").innerHTML= '<p>正在验证，请耐心等待……</p>';
                    setTimeout(function(){
                        document.querySelector("div#signup").innerHTML= '<p>注册成功</p>';
                    }, Math.ceil(Math.random()*10000));

                }else{
                    alert("验证失败");
                }
                return false;
            }

        }
    </script>
    <h1>祝大家牛年大吉！</h1>
    <div id="sigin" hidden>
        <form>
        用户名: <input type="text" name="username" maxlength="10"><br>
        密码: <input type="password" name="password" maxlength="10"><br>
        <input type="button" class="sub" value="确定">
        </form>
    </div>

    <div id="signup">
        <form action="demo_form.php">
        用户名: <input type="text" name="username" maxlength="10"><br>
        密码: <input type="password" name="password" maxlength="10"><br>
        记住密码: <input type="checkbox" name="remeber" maxlength="10" checked><br>
        多点登录: <input type="checkbox" name="multi_login" maxlength="10"><br>
        城市：
        <select name="city">
            <option value="gz">广州</option>
            <option value="cs">长沙</option>
            <option value="cq">重庆</option>
            <option value="sz">深圳</option>
        </select>
        <input type="submit" value="提交">
        </form>

    </div>
</body>
</html>